/* 学员信息页面思路分析
1.默认加载学员信息列表 
2.添加学员 ：bootstrap模态框
3.省市县三级联动
4.确认添加 : 发送ajax请求
5.重置添加弹窗
6.删除学员信息
7.修改学员信息

本页面三个难点
难点1 ： 省市县三级联动 逻辑复杂
难点2 ： 表单较多，需要单独封装函数获取参数
难点3 ： 新增和编辑复用一个模态框， 一个按钮实现两种业务
    新增 ： (1)获取表单数据 (2)发送新增ajax请求
    编辑 ： (1)将点击的当前数据渲染到表单上 (2)获取表单数据 (3)发送编辑ajax请求
*/

const token = localStorage.getItem('CMSTOKEN')
if (!token) {
    alert('你没有登录')
    location.href = 'login.html'
}

// const getStudentList = () => {
//     axios({
//         url: '/student/list',
//     }).then(({ data: res }) => {
//         console.log(res.data);
//         document.querySelector('tbody').innerHTML = res.data.map(item => {
//             return `
//             <tr>
//         <th scope="row">${item.id}</th>
//         <td>${item.name}</td>
//         <td>${item.age}</td>
//         <td>${item.sex}</td>
//         <td>${item.group}</td>
//         <td>${item.phone}</td>
//         <td>${item.salary}</td>
//         <td>${item.truesalary}</td>
//         <td>${item.province + item.city + item.county}</td>
//         <td>
//           <button type="button" class="btn btn-primary btn-sm edit"data-id="${item.id}">修改</button>
//           <button type="button" class="btn btn-danger btn-sm del" data-id="${item.id}">删除</button>
//         </td>
//       </tr>   
//             `
//         }).join('')
//     })
// }
// getStudentList()

const tbody = document.querySelector('tbody')
// 打开页面 发送ajax请求 获取所有成绩
const getStudentList = () => {
    axios({
        url: '/student/list'
    }).then(({ data: res }) => {
        if (res.code !== 0) return Toast.fail(res.message)
        // Toast.success(res.message)
        // console.log(res)
        tbody.innerHTML = res.data.map(item => {
            return `
            <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm edit" data-id="${item.id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm del"  data-id="${item.id}">删除</button>
        </td>
      </tr>
            `
        }).join('')
    })
}
getStudentList()


// 2.删除学员信息
// 2.1使用事件委托 给tbody 注册事件
// 2.2判断点击是不是删除按钮
// 2.3发送ajax
// 2.4成功 需要重新渲染页面
// const tbody = document.querySelector('tbody')
// tbody.addEventListener('click', function (e) {
//     if (e.target.classList.contains('del')) {
//         if (confirm('确认要删除吗？')) {
//             axios({
//                 url: '/student/delete',
//                 method: 'delete',
//                 params: {
//                     id: e.target.dataset.id
//                 }
//             }).then(({ data: res }) => {
//                 if (res.code !== 0) return Toast.fail(res.message)
//                 Toast.success(res.message)
//                 getStudentList()
//             })
//         } else {
//             Toast.info('取消删除')
//         }
//     }
// })


tbody.addEventListener('click', function (e) {
    e.preventDefault()
    if (e.target.classList.contains('del')) {
        const id = e.target.dataset.id
        // console.log(query);
        if (confirm('确定要删除吗?')) {
            axios({
                url: '/student/delete',
                method: 'delete',
                params: {
                    id
                }
            }).then(({ data: res }) => {
                // console.log(res)
                if (res.code !== 0) return Toast.fail(res.message)
                Toast.success(res.message)
                getStudentList()
            })
        }

    }
})

// 3.点击添加学员 弹出模态框
// 获取添加学员的模态框
const myModal = new bootstrap.Modal(document.querySelector('#addModal'))
// 获取 添加学员的按钮 注册点击事件
document.querySelector('.btnAddStu').addEventListener('click', function () {
    myModal.show()
    // 调用获取省份
    getProvince()
    document.querySelector('.addModalLabel').innerHTML = '录入新学员'
    document.querySelector('.btnAddStudent').innerHTML = '确认录入'
    document.querySelector('.add-form').reset()
    document.querySelector('[name=city]').innerHTML = `<Option>--市--</Option>`
    document.querySelector('[name=county]').innerHTML = `<Option>--县、区--</Option>`
    //删除 按钮身上的 自定义属性
    document.querySelector('.btnAddStudent').removeAttribute(data - id)
})
// 省市县联动
//省
const province = document.querySelector('[name="province"]')
const getProvince = () => {
    axios({
        url: '/geo/province'
    }).then(({ data: res }) => {
        province.innerHTML = '<option selected value="">--省--</option>' + res.map(item => `
            <option value="${item}">${item}</option>
        `).join('')
    })
}
//市
const city = document.querySelector('[name="city"]')
const getcity = () => {
    axios({
        url: '/geo/city',
        params: {
            pname: province.value
        }
    }).then(({ data: res }) => {
        city.innerHTML = '<option selected value="">--市--</option>' + res.map(item => `
            <option value="${item}">${item}</option>
        `).join('')
    })
}
province.addEventListener('change', function () {
    county.innerHTML = '<option value="">--区、县--</option>'
    getcity()
})
//区
const county = document.querySelector('[name="county"]')
const getcounty = () => {
    axios({
        url: '/geo/county',
        params: {
            pname: province.value,
            cname: city.value
        }
    }).then(({ data: res }) => {
        county.innerHTML = '<option selected value="">--区--</option>' + res.map(item => `
            <option value="${item}">${item}</option>
        `).join('')
    })
}
city.addEventListener('change', function () {
    getcounty()
})

// 添加学员
// 获取 add-form 注册submit事件
// 阻止表单的默认行为
// 获取用户输入的数据
// 发送ajax
// 判断数据是否请求成功
// 重新渲染 清空表单 关闭模态框
document.querySelector('.add-form').addEventListener('submit', function (e) {
    e.preventDefault()
    const data = serialize(this, { hash: true })
    //获取 按钮身上的 自定义属性值
    const id = this.querySelector('.btnAddStudent').dataset.id
    let url = '/student/add'
    let method = 'post'
    if (id) {
        data.id = id
        url = '/student/update'
        method = 'put'

    }
    axios({
        url,
        method,
        data
    }).then(({ data: res }) => {
        if (res.code !== 0) return Toast.fail(res.message)
        Toast.success(res.message)
        getStudentList()
        this.reset()
        myModal.hide()
    }).catch(err => {
        Toast.fail(err.response.data.message)
    })
})




//8点击 修改按钮 显示模态框
// 使用事件委托 给修改按钮注册点击事件
// 判断 点击是否是 修改按钮
// 显示模态框
// 修改[录入新学员]修改学员信息

tbody.addEventListener('click', function (e) {
    if (e.target.classList.contains('edit')) {
        myModal.show()
        document.querySelector('.addModalLabel').innerHTML = '修改学员信息'
        document.querySelector('.btnAddStudent').innerHTML = '确认修改信息'

        getProvince()
        const id = e.target.dataset.id
        axios({
            url: '/student/one',
            params: {
                id
            }
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.code !== 0) return Toast.fail(res.message)

            document.querySelector('[name = name]').value = res.data.name
            document.querySelector('[name = age]').value = res.data.age
            document.querySelector('[name = group]').value = res.data.group
            document.querySelector('[name = phone]').value = res.data.phone
            document.querySelector('[name = salary]').value = res.data.salary
            document.querySelector('[name = truesalary]').value = res.data.truesalary
            document.querySelector('.btnAddStudent').dataset.id = res.data.id

            if (res.data.sex === '男') {
                //需要获取name = sex 的dom元素
                document.querySelectorAll('[name = sex]')[0].checked = true
            } else {
                document.querySelectorAll('[name = sex]')[1].checked = true
            }

            document.querySelector('[name = province]').value = res.data.province
            document.querySelector('[name=city]').innerHTML = `<Option  value="${res.data.city}" selected>${res.data.city}</Option>`
            document.querySelector('[name=county]').innerHTML = `<Option value="${res.data.city}" selected>${res.data.county}</Option>`
        })
    }
})
